<template>
    <div class="container">
        <div class="box">
            <el-col :span="15">
                <el-input type="text" placeholder="请输入员工工号作为检索关键字" v-model="keyword" maxlength="10"
                          show-word-limit></el-input>
            </el-col>
            <div>
                <el-button type="primary" round @click="searchEmp">查找</el-button>
                <el-button type="danger" round @click="addEmployees">添加</el-button>
            </div>
        </div>
        <div>
            <el-table
                    :data="Staff_tableData"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand" label-width="120px">
                            <el-form-item label="年龄">
                                <span>{{ props.row.age }}</span>
                            </el-form-item>
                            <el-form-item label="性别">
                                <span>{{ props.row.gender }}</span>
                            </el-form-item>
                            <el-form-item label="住址">
                                <span>{{ props.row.address }}</span>
                            </el-form-item>
                            <el-form-item label="学历">
                                <span>{{ props.row.education}}</span>
                            </el-form-item>
                            <el-form-item label="联系方式">
                                <span>{{ props.row.contact }}</span>
                            </el-form-item>
                            <el-form-item label="岗位">
                                <span>{{ props.row.stationName }}</span>
                            </el-form-item>
                            <el-form-item label="薪水">
                                <span>{{ props.row.salary }}</span>
                            </el-form-item>
                            <el-form-item label="当前工作任务">
                                <span>{{ props.row.currentTask }}</span>
                            </el-form-item>
                            <el-form-item label="合约开始时间">
                                <span>{{ props.row.contractStart }}</span>
                            </el-form-item>
                            <el-form-item label="合约终止时间">
                                <span>{{ props.row.contractEnd }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="工号"
                        prop="workNumber">
                </el-table-column>
                <el-table-column
                        label="姓名"
                        prop="name">
                </el-table-column>
                <el-table-column align="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="edit_Station(scope.row.workNumber)">编辑岗位</el-button>
                        <el-button size="mini" @click="edit_Salary(scope.row.workNumber)">编辑薪资</el-button>
                        <el-button size="mini" type="danger" @click="delete_Employee(scope.row.workNumber)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
<!--        添加员工的弹窗-->
        <el-dialog title="添加员工" :visible.sync="addDialogVisible" width="40%">
            <el-form label-width="80px" ref="add_form_ref" :model="add_form" >
                <el-form-item label="名称">
                    <el-col :span="20">
                        <el-input placeholder="请输入员工名称" v-model="add_form.name"></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="年龄">
                    <el-col :span="20">
                        <el-input placeholder="请输入员工年龄" v-model="add_form.age"></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="性别">
                    <el-select id="select" style="width: 83.5%" v-model="add_form.gender" placeholder="选择性别">
                        <el-option
                                v-for="item in gender_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地址">
                    <el-col :span="20">
                        <el-input placeholder="请输入员工地址" v-model="add_form.address"></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="教育背景">
                    <el-select id="select" style="width: 83.5%" v-model="add_form.education" placeholder="选择教育背景">
                        <el-option
                                v-for="item in education_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-col :span="20">
                        <el-input placeholder="请输入员工的联系方式" v-model="add_form.contact" maxlength="11"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="职位">
                    <el-select id="select" style="width: 83.5%" v-model="add_form.stationName" placeholder="选择职位">
                        <el-option
                                v-for="item in station_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="薪水">
                     <el-col :span="20">
                        <el-input placeholder="请输入员工的基本工资" v-model="add_form.salary" maxlength="11"
                                  show-word-limit></el-input>
                    </el-col>
<!--                     <el-select id="select" style="width: 83.5%" v-model="add_form.salary" placeholder="选择薪资水平">
                        <el-option
                                v-for="item in salary_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select> -->
                </el-form-item>
                <el-form-item label="合同日期">
                    <el-date-picker
                            v-model="add_form.date_value"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="合同开始日期"
                            end-placeholder="合同终止日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add_new_Employee">添 加</el-button>
                </span>
        </el-dialog>
<!--        编辑岗位的弹窗-->
        <el-dialog title="编辑岗位" :visible.sync="editStationDialogVisible" width="40%">
            <el-form label-width="120px" ref="add_form_ref" :model="edit_Station_form" >
                <el-form-item label="员工工号">
                    <el-col :span="20">
                        <el-input  v-model="edit_Station_form.workNumber" :disabled="true"></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="变更类型">
                    <el-col :span="20">
                        <el-input placeholder="请输入职位变更类型" v-model="edit_Station_form.change_type" maxlength="20"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="变更原因">
                    <el-col :span="20">
                        <el-input placeholder="请输入职位变更原因" v-model="edit_Station_form.reason" maxlength="100"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="选择变更职位">
                    <el-select id="select" style="width: 83.5%" v-model="edit_Station_form.des_station" placeholder="请选择变更的职位">
                        <el-option
                                v-for="item in des_station_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="editStationDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="modify_Station">修 改</el-button>
                </span>
        </el-dialog>
<!--编辑薪资的弹窗-->
        <el-dialog title="编辑岗位" :visible.sync="editSalaryDialogVisible" width="40%">
            <el-form label-width="120px" ref="add_form_ref" :model="edit_Station_form" >
                <el-form-item label="员工工号">
                    <el-col :span="20">
                        <el-input  v-model="edit_Salary_form.workNumber" :disabled="true"></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="变更类型">
                    <el-col :span="20">
                        <el-input placeholder="请输入薪酬变更类型" v-model="edit_Salary_form.change_type" maxlength="20"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="变更原因">
                    <el-col :span="20">
                        <el-input placeholder="请输入薪酬变更原因" v-model="edit_Salary_form.reason" maxlength="100"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="选择变更薪酬">
                    <el-col :span="20">
                        <el-input placeholder="请输入变更后的薪酬" v-model="edit_Salary_form.des_salary" maxlength="10"
                                  show-word-limit></el-input>
                    </el-col>
                    <!-- <el-select id="select" style="width: 83.5%" v-model="edit_Salary_form.des_salary" placeholder="请选择变更的目的薪酬">
                        <el-option
                                v-for="item in salary_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select> -->
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="editSalaryDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="modify_Salary">修 改</el-button>
                </span>
        </el-dialog>
    </div>

</template>

<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>

<script>
    export default {
        data() {
            return {
                search: '',
                Staff_tableData: [],
                keyword: '',
                addDialogVisible: false,
                editStationDialogVisible: false,
                editSalaryDialogVisible: false,
                gender_options: [
                    {
                        value: 1,
                        label: '男'
                    },
                    {
                        value: 0,
                        label: '女'
                    }
                ],
                education_options: [
                    {
                        value: '大专',
                        label: '大专及以下'
                    },
                    {
                        value: '本科',
                        label: '本科'
                    },
                    {
                        value: '硕士',
                        label: '硕士'
                    },
                    {
                        value: '博士及博士后',
                        label: '博士及博士后'
                    }
                ],
                salary_options: [],
                station_options: [],
                des_station_options: [],

                add_form: {
                    name: '',
                    age: '',
                    gender: '',
                    address: '',
                    education: '',
                    contact: '',
                    stationName: '',
                    salary: '',
                    date_value: '',
                    // contractStart: '',
                    // contractEnd: ''
                },
                edit_Station_form: {
                    workNumber: '',
                    change_type: '',
                    reason: '',
                    des_station: ''
                },
                edit_Salary_form: {
                    workNumber: '',
                    change_type: '',
                    reason: '',
                    des_salary: ''
                }

            }
        },
        methods: {
            searchEmp() {
                if (this.keyword.length !== 10){
                    this.$message.error('输入工号不满足10位')
                    this.keyword = ''
                }
                else {
                    let data = {"token": this.$store.state.token, "workNumber": this.keyword}
                    this.$http.post('/getEmployees', data).then( res => {
                        // console.log(res.data)
                        this.Staff_tableData = res.data.data
                    })
                }

            },
            //添加员工
            addEmployees() {
                this.addDialogVisible = true
            },
            //确认添加信息
            add_new_Employee() {
              // console.log(this.date_value)
                let data = {
                    "token": this.$store.state.token,
                    'name': this.add_form.name,
                    'age': this.add_form.age,
                    'gender': this.add_form.gender,
                    'address': this.add_form.address,
                    'education': this.add_form.education,
                    'contact': this.add_form.contact,
                    'stationName': this.add_form.stationName,
                    'salary': this.add_form.salary,
                    'contractStart': this.add_form.date_value[0],
                    'contractEnd': this.add_form.date_value[1]
                }
                console.log(data)
                this.$http.post('/addEmployee', data).then( res => {
                   if (res.data.result == "success") {
                     this.$message.success("添加成功");
                      this.addDialogVisible = false
                    } else {
                        this.$message.error("没有权限");
                    }
                })
            },
            //删除员工
            delete_Employee(id) {
                let data = {
                    "token": this.$store.state.token,
                    'workNumber': id
                }
                this.$http.post('/deleteEmployee', data).then( res => {
                    console.log(res.data)
                    if (res.data.result == "success") {
                     this.$message.success("删除成功");
                      this.addDialogVisible = false
                    } else {
                        this.$message.error("没有权限");
                    }
                })
            },
            //编辑岗位
            edit_Station(id){
                this.editStationDialogVisible = true
                this.edit_Station_form.workNumber = id
            },
            //确认修改
            modify_Station() {
                //des_station的值为部门ID-职位ID，后台处理一下
                let data = {
                    "token": this.$store.state.token,
                    'workNumber': this.edit_Station_form.workNumber,
                    'changeType': this.edit_Station_form.change_type,
                    'reason': this.edit_Station_form.reason,
                    'des_station': this.edit_Station_form.des_station,
                }
                console.log(data)
                this.$http.post('/updateStation', data).then( res => {
                    if (res.data.result == "success") {
                     this.$message.success("修改成功");
                      this.editStationDialogVisible = false
                    } else {
                        this.$message.error("没有权限");
                    }
                })
            },
            //编辑薪资
            edit_Salary(id){
                this.editSalaryDialogVisible = true
                this.edit_Salary_form.workNumber = id
            },
            //确认修改
            modify_Salary() {
                let data = {
                    "token": this.$store.state.token,
                    'workNumber': this.edit_Salary_form.workNumber,
                    'change_type': this.edit_Salary_form.change_type,
                    'reason': this.edit_Salary_form.reason,
                    'des_salary': this.edit_Salary_form.des_salary,
                }
                console.log(data)
                this.$http.post('/updateSalary', data).then( res => {
                   if (res.data.result == "success") {
                     this.$message.success("修改成功");
                      this.editSalaryDialogVisible = false
                    } else {
                        this.$message.error("没有权限");
                    }
                })
            },

            fetch() {
                let data = {"token": this.$store.state.token, "workNumber": ''}
                this.$http.post('/getEmployees', data).then( res => {
                    // console.log(res.data)
                    this.Staff_tableData = res.data.data
                    this.salary_options = res.data.salary_options
                    this.station_options = res.data.station_options
                    this.des_station_options = res.data.des_station_options
                })
            }
        },
        created() {
            this.fetch()
        }
    }
</script>
